<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_DOM事件监听</title>
</head>
<body>
    <button onclick="alert('点击了')">按钮1</button>
    <button id = "btn">按钮2</button>

    <h4>震惊：居然可以这样写</h4>

    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dignissimos eligendi est, placeat qui
            quo sed sunt tenetur voluptas voluptate. Adipisci, minima, quod! A consequuntur illum nihil quo quod
            voluptatum!
        </div>
        <div>Accusantium, aliquam amet aspernatur at consequatur consequuntur debitis deserunt dolor eos error ipsa
            labore laboriosam magnam perferendis quod totam vel voluptas. Architecto enim minus optio sequi suscipit.
            Asperiores, inventore, ipsam?
        </div>
        <div>Adipisci amet at, aut consequuntur cum delectus eaque hic illo inventore iste itaque iure laudantium libero
            magnam magni maiores natus nemo nihil nobis quasi reiciendis repellendus sit suscipit tempora voluptatum!
        </div>
        <div>Accusantium aliquid beatae consequuntur, dicta eius libero necessitatibus nesciunt odit quaerat reiciendis.
            Adipisci commodi distinctio esse illum ipsa suscipit, velit voluptatibus. At beatae eaque harum iusto
            nesciunt quasi quibusdam soluta!
        </div>
        <div>Consequuntur ipsam praesentium vel voluptatem. Culpa delectus deserunt ducimus enim eveniet facilis
            inventore, laudantium magnam maiores molestiae nobis perspiciatis porro possimus quam quia recusandae
            reiciendis rem rerum vel velit veritatis!
        </div>
        <div>Cum ea eos modi, necessitatibus qui quod vel voluptas voluptatum. Architecto consectetur distinctio error
            illum optio reiciendis. Accusamus dolor eaque impedit quas recusandae repellat rerum totam vel! At, incidunt
            quasi.
        </div>
        <div>Accusantium adipisci, alias aut culpa dicta dolore dolorum enim error fugit ipsa iure molestiae nam natus
            nesciunt quia sapiente similique sint sunt tenetur veniam vitae, voluptate, voluptates. Inventore ratione,
            repellendus?
        </div>
        <div>Delectus dolor doloremque esse possimus quod soluta. Ad assumenda delectus exercitationem, harum impedit
            inventore officia placeat praesentium, quaerat quam qui quisquam repellat repellendus tenetur totam velit
            vero vitae? Culpa, esse.
        </div>
        <div>Cum dignissimos distinctio, ea eveniet exercitationem expedita illo incidunt maiores minima minus nesciunt
            nihil nisi, numquam officiis praesentium quas quibusdam saepe sapiente totam velit. Aliquam illo
            necessitatibus placeat quo vitae.
        </div>
        <div>Alias inventore ipsa ipsam iure labore laboriosam, mollitia nobis perferendis porro, quidem quod
            repudiandae sint sunt temporibus, vero. Amet commodi, fuga necessitatibus nulla optio quas voluptas?
            Deleniti fuga sed veritatis.
        </div>
        <div>Corporis esse eveniet iure porro suscipit. Accusamus ad consequuntur, dolor dolorem eum, maiores nam
            nesciunt odio omnis porro quas quo, voluptatem. Eaque error ipsa nihil nisi. Beatae labore maxime saepe.
        </div>
        <div>Ab aperiam asperiores assumenda dignissimos dolor enim exercitationem fugit id iste libero natus
            necessitatibus, qui reiciendis rerum sed totam vel. Ab, nesciunt quae. Animi blanditiis nam quo quod saepe
            voluptas!
        </div>
        <div>Aperiam culpa dicta dolore ea facilis illum libero minus nobis quae, recusandae saepe sint tempora totam
            veritatis voluptate. Aliquid explicabo incidunt magnam maxime mollitia repellendus similique vero. Culpa,
            tempora, velit!
        </div>
        <div>Animi architecto cum doloremque dolorum eveniet iusto labore molestiae nobis numquam odio quas quia
            voluptate, voluptates. Assumenda ipsam iusto maiores molestiae molestias neque officia porro soluta
            temporibus voluptatibus! Minus, quod?
        </div>
        <div>Amet asperiores aut autem consectetur culpa delectus, dolore esse explicabo, facere illo minima molestias
            neque nihil nulla obcaecati omnis perspiciatis quam quasi qui rem repudiandae sapiente tenetur velit vero
            voluptate.
        </div>
        <div>Aliquid commodi consequatur, eligendi enim et eum, facere facilis fuga fugit id illo ipsam iure magni minus
            molestiae necessitatibus nobis numquam officia perferendis, quibusdam quo ratione recusandae saepe sed unde?
        </div>
        <div>Ad est excepturi iste maxime nulla optio recusandae tempora, vel! Beatae blanditiis consectetur
            consequuntur corporis dolorem, exercitationem expedita hic minima, modi nihil odio quidem quo repellat
            repellendus reprehenderit sed, sit!
        </div>
        <div>Accusantium adipisci alias architecto atque corporis cupiditate dicta dolorem, excepturi facilis fuga illum
            impedit iste nemo numquam quae quasi qui quod saepe, sed sit unde voluptates voluptatum! Laborum, repellat,
            sint!
        </div>
        <div>Alias at commodi deserunt doloremque eaque illum iusto magnam molestias, nemo nobis nostrum praesentium
            provident repellat saepe soluta ullam, voluptatem. Explicabo harum nihil nobis perspiciatis sint,
            voluptates. Commodi, enim ut!
        </div>
        <div>Deleniti, dolorum facere neque optio quas unde voluptas. A assumenda deleniti fugit impedit ipsa, omnis.
            Illum, ipsa nam. At autem blanditiis corporis deleniti excepturi fugiat hic omnis possimus sit tempore!
        </div>
        <div>Accusantium aspernatur at esse est fuga itaque nesciunt saepe tempore, tenetur voluptatum! Aut autem
            deleniti doloribus, iste nemo nostrum quo reiciendis repellendus, saepe sint temporibus tenetur voluptate
            voluptatibus. Nobis, voluptate.
        </div>
        <div>At blanditiis deleniti, eligendi impedit ipsam, ipsum iure natus nisi sit sunt tempore temporibus velit,
            voluptate. Atque debitis doloribus error in laboriosam mollitia neque non perferendis provident quam vitae,
            voluptatem.
        </div>
        <div>Consequuntur, minima praesentium! Et facilis nulla quibusdam! Consequuntur dolore eligendi harum illo minus
            officia optio vitae. Aliquam amet ducimus error, esse incidunt labore minima nihil quos sunt unde. Labore,
            odit!
        </div>
        <div>Accusamus autem enim harum incidunt nulla odit vitae. Adipisci aliquid blanditiis consequatur corporis
            culpa deleniti doloremque error eum facere inventore nam, nobis provident quaerat quidem quos sed
            voluptatem. Est, nisi!
        </div>
        <div>Ad aliquam amet aperiam atque consequatur delectus deleniti deserunt dicta ea eius facilis iste iure
            molestiae nostrum numquam perspiciatis quae quam quasi quibusdam reiciendis repellat sapiente, soluta vel
            veniam voluptate.
        </div>
        <div>Accusantium ad dicta doloremque est in inventore minus non rerum sed sint! Amet consequatur delectus
            deserunt, dolorum ea, excepturi, explicabo fugit ipsum iusto labore magni obcaecati odio omnis quisquam
            tenetur.
        </div>
        <div>Dolore nihil pariatur ullam! At eaque harum, nihil praesentium veritatis voluptatem? Animi blanditiis
            dolores ex facere harum perferendis repellat unde? Adipisci asperiores cupiditate eaque, et excepturi
            expedita id placeat? Possimus.
        </div>
        <div>Asperiores delectus, dicta doloremque earum eos facilis necessitatibus nostrum numquam quaerat qui quo rem
            totam! Adipisci aperiam autem doloribus hic id, ipsam magnam mollitia perspiciatis praesentium provident,
            ratione, repellat sed?
        </div>
        <div>Alias aspernatur assumenda autem commodi cumque cupiditate dicta dolor eveniet excepturi explicabo harum
            hic impedit laudantium minima, neque nesciunt nihil obcaecati perspiciatis quaerat rem repellendus
            reprehenderit sit temporibus, veniam voluptate.
        </div>
        <div>Ad adipisci aliquam dolore iusto magni nostrum quae quibusdam rem sint ut. Assumenda culpa deserunt dolorem
            ducimus id illo illum, iste nostrum perferendis quo sequi tempore, totam ullam ut voluptatum!
        </div>
        <div>Blanditiis dolor ducimus eveniet facere, nesciunt odio placeat possimus praesentium quam qui reprehenderit,
            sed tempora, totam unde veniam voluptate voluptatibus. Consectetur consequuntur earum exercitationem facilis
            laborum mollitia quam, reprehenderit sapiente.
        </div>
        <div>Amet doloremque eligendi in laborum officiis reprehenderit ullam veniam. Dolor laboriosam maiores quisquam
            quos reiciendis vero voluptas. Molestias nesciunt quia rem saepe. Autem cum in iusto officiis quidem
            repudiandae sit!
        </div>
        <div>Eaque error incidunt magnam maiores quod. Aspernatur, consequatur deserunt eaque et eum ipsum iusto modi
            molestias nesciunt nostrum nulla omnis reprehenderit sunt suscipit totam ullam voluptates? Cumque enim
            eveniet possimus!
        </div>
        <div>Alias asperiores atque autem blanditiis corporis dignissimos dolorem eos et fuga impedit incidunt ipsam
            minus molestias nesciunt nostrum officiis, placeat possimus quo, quos repellat repellendus reprehenderit
            tenetur totam vel velit.
        </div>
        <div>Accusantium aliquid commodi eos impedit ipsa laboriosam libero magnam, maiores necessitatibus nobis nostrum
            perspiciatis quasi reprehenderit saepe sit veniam voluptate! Aut culpa enim eveniet mollitia, odit quia
            quidem reiciendis sit.
        </div>
        <div>Animi, autem dolore doloremque eveniet fugit, harum impedit incidunt iste minus molestias nesciunt quasi
            quis tempore vero voluptas. Blanditiis dolor ea eaque eveniet facere impedit ipsum laudantium, nemo velit
            vero!
        </div>
        <div>Aperiam asperiores aspernatur consectetur culpa delectus eos, illo in incidunt mollitia nam nobis non
            pariatur quae qui rem sed sint temporibus tenetur vel voluptatibus? Aut deserunt distinctio dolorem quas
            voluptates?
        </div>
        <div>A accusantium, atque dolore eaque illum in laborum, laudantium molestiae molestias non nostrum odio
            reprehenderit sed velit voluptatem! Blanditiis delectus dicta eum iste molestias neque reiciendis rem sint
            velit voluptate?
        </div>
        <div>Aspernatur at dolorem nam non. Animi asperiores doloremque dolores illo ipsam laborum maiores
            necessitatibus nesciunt pariatur, possimus quae quos, reprehenderit similique soluta, vel? A cumque
            doloremque eum, officiis saepe vel?
        </div>
        <div>Consequatur excepturi repudiandae tempora vel! A aperiam aspernatur consectetur cumque, deserunt, dolore,
            doloremque error facere id inventore libero molestias odio ratione sequi sint. Deleniti neque nulla placeat
            repellat suscipit. Laudantium.
        </div>
        <div>Aliquid architecto consequuntur ea ipsa iste iusto magnam magni placeat sapiente sunt veritatis,
            voluptates! Accusantium ad debitis labore molestias officiis pariatur quisquam sit? Animi labore magni
            molestias non officia vitae!
        </div>
        <div>Aut, illum, nemo. A blanditiis consequuntur laboriosam libero. Asperiores aspernatur atque, eaque itaque,
            laboriosam laudantium minus molestiae natus officia optio provident quaerat quasi, quis recusandae repellat
            repudiandae tempore vero voluptas.
        </div>
        <div>A ad animi aut delectus eius et eveniet itaque, molestiae perspiciatis porro provident quaerat quam quas
            quod, rem sed tenetur totam velit voluptatem voluptatum. Enim excepturi explicabo optio quaerat suscipit.
        </div>
        <div>Accusantium ad asperiores aut cum, dolorum eos esse et ex exercitationem fugit iure, officia optio quae
            repellendus, sapiente. Delectus dignissimos facere fugiat ipsam natus nulla pariatur, quas totam vel
            voluptas?
        </div>
        <div>Alias aliquam assumenda at blanditiis deserunt impedit inventore ipsa ipsum, laudantium libero maiores
            numquam officia officiis optio perferendis possimus quae quam quia ratione repellendus sed similique
            temporibus? Blanditiis, facilis, impedit!
        </div>
        <div>Incidunt magni numquam soluta? Accusamus deleniti dolorem eos in quae quis reiciendis. Accusamus blanditiis
            dolore dolores dolorum ducimus earum eius illo molestiae, mollitia nostrum quis rem similique veritatis?
            Atque, quam.
        </div>
        <div>Aperiam autem dicta ea earum eius enim eos esse est ex fugit harum incidunt nobis nostrum odio odit
            officiis optio, porro quidem quo quod reiciendis rem, repudiandae unde, ut vel?
        </div>
        <div>Accusantium aliquid aut autem culpa dolorem earum expedita facere fugit in ipsam laboriosam maxime,
            nesciunt, nostrum porro qui rerum sequi, temporibus! Alias asperiores doloribus dolorum earum est, ipsam
            laborum possimus!
        </div>
        <div>At excepturi harum ipsa magnam, nostrum officia soluta voluptatem voluptates! Ad asperiores dolores earum
            iste nemo officia quaerat temporibus totam ut vitae? Aliquid id maiores repellendus totam vero? Eligendi,
            id.
        </div>
        <div>Alias dicta et illum placeat quaerat quidem unde? Ab adipisci commodi corporis, cum debitis doloribus eaque
            explicabo harum illo laudantium nisi odio omnis possimus quasi quibusdam reprehenderit veniam, voluptates
            voluptatum.
        </div>
        <div>Aliquam ipsa labore molestiae quisquam tenetur! Consequuntur eos maxime, minima numquam quaerat quasi
            reprehenderit sint velit veritatis! Aspernatur commodi cumque dicta ex illo nihil pariatur placeat soluta
            velit? Necessitatibus, quaerat!
        </div>
        <div>Blanditiis dignissimos dolor doloremque earum harum inventore ipsum magnam modi nesciunt numquam obcaecati
            odit possimus praesentium quos, sunt, suscipit temporibus unde vitae. Cupiditate facilis labore libero nulla
            pariatur, quas repellat?
        </div>
        <div>Animi, aspernatur corporis deleniti dolor eaque impedit laudantium maiores molestias placeat praesentium
            qui quia, similique temporibus! Accusantium blanditiis dicta in labore, modi molestias, nulla odit officia
            quaerat sit voluptate voluptates!
        </div>
        <div>Commodi dicta ducimus eveniet labore minima? A animi eum harum omnis quis rerum, voluptate? Enim harum
            laudantium nostrum sit suscipit totam vero. At blanditiis, cum laboriosam modi neque veniam voluptatum.
        </div>
        <div>Accusantium aliquam aperiam, cupiditate debitis deserunt dolor ea eos est et hic iste itaque labore magni
            maxime minus molestiae nobis non optio pariatur reiciendis rem reprehenderit sed sequi sunt ullam.
        </div>
        <div>Adipisci architecto aspernatur assumenda at dicta dignissimos, dolores enim esse eveniet fuga hic impedit
            incidunt laboriosam maxime molestias nihil nobis, officia officiis perferendis provident quis vel
            voluptatibus! Illum sit, tempore!
        </div>
        <div>A eum explicabo fugit incidunt ipsum laborum necessitatibus nesciunt nihil officia placeat porro provident
            quam quia, quos rem tenetur, unde? Accusamus excepturi itaque reprehenderit soluta! Incidunt ipsam iusto
            maiores praesentium!
        </div>
        <div>Minus optio perferendis sed veniam voluptatibus. A consequuntur, illum laudantium possimus quidem sit? A
            consectetur earum facere id iste labore laboriosam laborum magnam nam omnis quia quod sequi, sunt velit!
        </div>
        <div>Alias aliquid deleniti est explicabo nulla. Amet aperiam architecto aut consequuntur dolorem eaque eius est
            et eum, hic modi mollitia nemo nisi odio officia perspiciatis quidem sit tempore velit voluptatibus.
        </div>
        <div>Aliquam autem commodi doloribus ducimus eius eum harum hic illo inventore laudantium libero magnam minima
            necessitatibus neque, numquam optio perferendis, placeat porro quaerat quam quisquam velit veniam vero!
            Alias, recusandae.
        </div>
    </div>

<!--    window对象是浏览器内置的全局对象，代表了当前浏览器窗口-->
    <script>
        //click 鼠标点击事件
        let btnE = document.getElementById('btn');
        btnE.addEventListener('click', function () {
            alert('点击了');
        })
        // window.addEventListener('click', function () {
        //     alert('点击了');
        // })

        // mouseover 鼠标移入事件
        let h4E = document.querySelector('h4');
        h4E.addEventListener('mouseover',function (){
            console.log('标题被查看了！');
        })
        // window.addEventListener('mouseover',function (){
        //     console.log('标题被查看了！');
        // })

        window.addEventListener('resize',function (){
            alert('窗口大小被改变');
        })
        window.addEventListener('scroll',function (){
            alert('页面被滚动了');
        })
    </script>

</body>
</html>